<template>
    <ImgCutter
            class="cover-cut"
            label="选择封面图"
            :DoNotDisplayCopyright="true"
            :tool="false"
            :isModal="false"
            :box-width="710"
            :box-height="180"
            :cut-width="150"
            :cut-height="100"
            :size-change="false"
            :imgMove="imgMove"
            :scaleAble="scaleAble"
            :moveAble="moveAble"
            @onChooseImg="coverChoose"
            @onClearAll="coverClear"
            @cutDown="coverConfirm">
            <template #choose>
                <span v-show="false"></span>
            </template>
            <template #cancel>
                <span class="action-button" v-show="isChoose">
                    <i class="icon icon-reset"></i>
                    <span>重置</span>
                </span>
            </template>
            <template #confirm>
                <span class="action-button" v-show="isChoose">
                    <i class="icon icon-upload"></i>                    
                    <span>上传</span>
                </span>
            </template>
        </ImgCutter>
</template>

<!-- https://chengpeiquan.com/article/vue-picture-cropper.html#demo -->

<script lang="ts" setup>
import { ref } from 'vue'
import ImgCutter from 'vue-img-cutter'
// 选择图片之后
// 选择图片并上传后不再允许编辑
const isChoose = ref<boolean>(false)
const imgMove = ref<boolean>(true) // 移动图片
const scaleAble = ref<boolean>(true) // 缩放图片
const moveAble = ref<boolean>(true) // 拖动裁剪框
const coverChoose = (data: object) => {
    console.log(data)
    isChoose.value = true
}
// 清空画布，重置
const coverClear = () => {
    isChoose.value = false
    imgMove.value = true
    scaleAble.value = true
    moveAble.value = true
}
// 完成截图要执行的方法
const coverConfirm = (data: object) => {
    console.log(data)
    // 上传完成后禁掉以下功能
    setTimeout(() => {
        isChoose.value = false
        imgMove.value = true
        scaleAble.value = true
        moveAble.value = true
    }, 5000)
}
</script>
<style lang="less" scoped>
.cover-cut {
    position: relative;
    :deep(.tips) {
        .btn {
            height: auto;
            background-color: #000;
            border-color: #000;
            line-height: 1;
            padding: 5px 15px;
            font-size: 16px;
            opacity: .7;
        }
    }
    :deep(.i-dialog-footer) {
        position: absolute;
        right: 10px;
        bottom: 0;
        margin: 0;
        z-index: 100;
        height: auto;
        display: table;
        width: auto;
        .btn-group{
            display: flex;
            > span {
                display: block;
                visibility: visible;
                opacity: 1;
                width: 70px;
                height: 30px;
                margin: 0 5px;
                cursor: pointer;
                .action-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #f7f7f7;
                    opacity: .78;
                    width: 100%;
                    height: 100%;
                    color: #606263;
                    text-align: center;
                    border-radius: 100px;
                    font-size: 14px;
                    .icon {
                        margin-right: 3px;
                    }
                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }
}
</style>